import {messages} from "share/common";
import React,{Component} from 'react';
import {connect} from 'react-redux'
import 'styles/third-consumption/small-component.scss'
import menuRoute from "routes/menuRoute";
import thirdConsumptionService from "../third-consumption.service";
import {Modal, Icon, Button} from 'antd';
import tipMg from 'images/third-consumption/no-card.png'
import tipMgEn from 'images/third-consumption/no-card-en.jpg'

class BusinessTravelCard extends Component{

  constructor(props){
    super(props);
    this.personalSetting = menuRoute.getRouteItem('personal-settings', 'key');
    this.state = {
      showModal: false,
      hasEnableContactCard: true,
      completeStatus: true,
      userCompleteStatus: true
    }
  }

  handleClickVenItem = (vendorCode, loginUrl) => {
    const {onClickItem, businessItem} = this.props;
    if(onClickItem){
      onClickItem(businessItem);
      return;
    }

    /*
    * hasEnableContactCard = true =>  是否有证件信息。
      completeStatus = true => 证件信息是否完整
      missingInformation 不完整描述
      userCompleteStatus = true 人员信息是否完整
      userMissingInformation 确实字段
      反之则是不完整，缺失状态
    * */

    thirdConsumptionService.thirdConsumptionLogin(loginUrl).then(res => {
      if(res.data.url){
        let userAgent = navigator.userAgent
        userAgent && (userAgent = userAgent.toUpperCase().replace(/\s+/g,''))
        if((vendorCode === 'ZHENXUAN' || vendorCode === 'ZHENXUAN_AIR') && userAgent && !userAgent.includes('WINDOWSNT6.1')){
          let tabConsumptionFrame = menuRoute.getRouteItem('book-consumption-frame','key').url;
          this.context.router.push({
            pathname: tabConsumptionFrame,
            state: {
              url: res.data.url
            }
          });
        }else{
          window.open(res.data.url, '_blank')
        }
      }else if(res.data && res.data.hasOwnProperty('hasEnableContactCard')){
        this.setState({
          showModal: !(res.data.hasEnableContactCard && res.data.completeStatus),
          hasEnableContactCard: res.data.hasEnableContactCard,
          completeStatus: res.data.completeStatus
        })
      }
    })
  };

  closeModal = () => {
    this.setState({
      showModal: false
    })
  }

  toSetting = () => {
    this.context.router.push(this.personalSetting.url);
  }


  render(){
    const {businessItem, language} = this.props;
    const {showModal, hasEnableContactCard, completeStatus, userCompleteStatus} = this.state;
    return (
      <div className='business-travel-card'>
        <div className='card-box' onClick={() => this.handleClickVenItem(businessItem.vendorCode, businessItem.loginUrl)}>
          <img src={businessItem.vendorIco} className='business-icon'/>
          <div className='business-title'>{businessItem.vendorName}</div>
        </div>
        <div className="modal-class"/>
        <Modal
          visible={showModal}
          title={messages('supplier-1.key14')/*请完善信息*/}
          width={540}
          getContainer={() => {
            return document.getElementsByClassName("modal-class")[0];
          }}
          onCancel={this.closeModal}
          footer={<Button onClick={this.closeModal}>{messages('common.ok')/*确定*/}</Button>}
        >
          <div style={{height: 225}}>
            {
              (!hasEnableContactCard || !completeStatus) && (
                <div className='tip-box'  style={{marginBottom: 20}}>
                  <p className='tip-title'>
                    {hasEnableContactCard && !completeStatus ? messages('supplier-1.key15')/*您的证件信息有缺失*/ : messages('supplier-1.key16')/*尚无有效证件*/}
                  </p>
                  <p>
                    {messages('supplier-1.key17')/*为了不影响你的预订，请在【个人设置-证件信息】中维护好证件信息*/}&nbsp;
                    <a onClick={this.toSetting}>{messages('supplier-1.key18')/*去维护*/}<Icon type='right'/></a>
                  </p>
                  <img style={{width: '100%'}} src={language.code === 'zh_cn' ? tipMg : tipMgEn}/>
                </div>
              )
            }
            {
              !userCompleteStatus && (
                <div className='tip-box'>
                  <p className='tip-title'>{messages('supplier-1.key19')/*人员信息不完整*/}</p>
                  <p style={{marginBottom: 0}}>{messages('supplier-1.key20')/*请联系管理员完善人员信息（手机号/邮箱/工号）后使用*/}</p>
                </div>
              )
            }
          </div>
        </Modal>
      </div>
    )
  }
}

BusinessTravelCard.contextTypes = {
  router: React.PropTypes.object
};

function mapStateToProps(state) {
  return {
    language: state.main.language
  }
}

export default connect(mapStateToProps)(BusinessTravelCard)
